<template>
  <!-- 查：
       1：定义查询 api
       2:导入
       3：进入页面就调用api
       4:存储数据并渲染
       5：与分页建立关联
         存储total总数
         改变页码与页容量都要重新调用接口
     持久化：
        1：数据有修改就存储到浏览器
        2：初始值读取浏览器存储

      增：
        1：创建新增的弹框组件
        2：在父组件使用
        3：点击新增打开弹框
        4：完成内部布局
        5：表单验证
        6：定义新增api
        7:点击确定在表单验证成功后调用
        8：调用成功
           a:提示
           b:清空表单数据与验证
           c:关闭弹框
           d:刷新父级列表数据

       改：
        1：打开弹框
        2：弹框内定义一个mode用于区分新增与编辑
        3：新增与编辑打开时都要修改mode的值
        4：调整标题
        5：数据回显（注意数据要深拷贝）
        6：表单验证如果有调整还需要调整
        7：定义编辑api
        8:导入
        9：点击确定分场景调用api
        10:调用成功
           a:提示
           b:关闭弹框
           c:清空表单验证与数据
           d:刷新父级列表数据

       删
        1：点击删除弹框确定框
        2：定义删除api
        3:导入删除api
        4:点击确定框的确定后调用删除api
        5:调用成功
            提示
            刷新列表数据
               判断是否页码>1  && 当前页只有一条数据
                    页码--后再刷新列表数据

       角色分配权限：
       1：创建分配权限弹框组件
       2：在父组件使用
       3：点击分配按钮打开弹框
       4：弹框组件内显示权限数据
           a:调用权限列表接口
           b:转换成树形结构
           c:通过el-tree渲染
           d:设置复选框
       5：勾选已有权限
            当前点击项数据包含权限数据，直接深拷贝使用
            当前点击项数据不包含权限数据，调用接口
            树形控件默认勾选
               1: el-tree   node-key="el-tree内每一条数据的标识，一般都是id"
               2:设置默认选中的数组  default-checked-keys=[选中项的id]
             调用el-tree内部的方法实现选中与取消选中
               1: el-tree   node-key="el-tree内每一条数据的标识，一般都是id"
               2:el-tree   ref="tree"
               3:设置
                  this.$refs.tree.setCheckedKeys([需要选中项的id])
                  清空：this.$refs.tree.setCheckedKeys([])
               4：获取:拿到已勾选项对应的id
                  this.$refs.tree.getCheckedKeys()

       6：定义修改api
       7:导入调用

 -->

  <div v-loading="loading" class="setting">
    <el-tabs>
      <el-tab-pane label="角色管理">
        <el-button type="primary" @click="addClick">新增角色</el-button>
        <el-table :data="list" border style="margin-top: 20px">
          <el-table-column label="序号" width="100px">
            <template v-slot="{ $index }">
              {{ (page.page - 1) * page.pagesize + $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="name" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="success"
                @click="setClick(row)"
              >分配权限</el-button>
              <el-button type="primary" @click="editClick(row)">编辑</el-button>
              <el-button
                type="danger"
                @click="delClick(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <!-- 组件名:el-pagination
                          current-page.sync:默认页码
                          page-sizes：页容量选项
                          page-size.sync：默认页容量
                          layout：功能配制项
                          total：总条数
                          @size-change：页容量改变时的回调函数
                          @current-change：页码改变时的回调函数
                    -->

          <el-pagination
            :current-page.sync="page.page"
            :page-sizes="[1, 2, 5, 10, 100, 200, 300, 400]"
            :page-size.sync="page.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>
      <el-tab-pane label="公司信息" lazy>
        <Info />
      </el-tab-pane>
    </el-tabs>
    <!-- 新增弹框组件 -->
    <Add ref="add" @getData="getData" />
    <!-- 权限分配组件 -->
    <SetPermission ref="set" :is-show.sync="showPermission" />
  </div>
</template>
<script>
import { sysRole, sysRoleDelete } from '@/api/setting'
import jsCookie from 'js-cookie'
import Add from './components/add'
// import Info from './components/info'
import SetPermission from './components/setPermission'
export default {
  components: {
    Add,
    // 异步组件
    Info: () => import('./components/info'),
    SetPermission
  },
  data() {
    return {
      showPermission: false,
      loading: false,
      list: [],
      page: {
        total: 100,
        page: 1, // 是	1	页码
        pagesize: +jsCookie.get('setting_pagesize') || 1 //	是	10	每页条数
      }
    }
  },
  // 生命周期：beforeCreate调用的那一刻还不能访问data与methods，但不代表做了异步处理后还不可以
  created() {
    this.getData()
  },
  methods: {
    // 页容量改变
    handleSizeChange(size) {
      // console.log(size, this.page.pagesize)
      this.getData()
      // 存储到浏览器
      jsCookie.set('setting_pagesize', size)
    },
    // 页码改变
    handleCurrentChange(page) {
      // console.log(page, this.page.page)
      this.getData()
    },
    // 获取角色列表
    async getData() {
      this.loading = true
      const res = await sysRole(this.page)
      this.loading = false
      this.list = res.data.rows
      this.page.total = res.data.total
      console.log('获取角色列表', res)
    },
    // 新增点击
    addClick() {
      // 打开弹框
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'add'
    },
    // 编辑点击
    editClick(row) {
      console.log(row)
      this.$refs.add.isShow = true
      this.$refs.add.mode = 'edit'
      this.$refs.add.form = JSON.parse(JSON.stringify(row))
    },
    // 删除点击
    async delClick(id) {
      await this.$confirm('您确定删除该项吗？', '提示')
      await sysRoleDelete(id)
      this.$message.success('删除成功')
      // 刷新列表数据
      // if (this.list.length === 1 && this.page.page > 1) {
      //   this.page.page--
      // }
      this.page.page = 1
      this.getData()
    },
    // 分配权限按钮点击
    setClick(row) {
      this.showPermission = true
      this.$refs.set.getRoleInfo(row.id)
      // console.log(row)
    }
  }
}
</script>
<style lang="scss" scoped>
.setting {
  padding: 20px;
  .page {
    padding: 15px 0;
    text-align: right;
  }
}
</style>
